<template>
	<div class="bg-login" ref="swiper" :class="path == '/login' ? 'login' : 'register'" :style="{ backgroundImage: 'url(' + loginBgs + ')' }">
		<div class="login"><router-view /></div>
	</div>
</template>
<script>
import webinfo from '@/mixins/webinfo.js';
export default {
	mixins: [webinfo],
	data() {
		return {
			path: this.$route.path
		};
	},
	computed: {
		loginBgs() {
			return this.loginBg || require('@/assets/BG.png');
			// return require('@/assets/BG.png')
		}
	},
	created() {},
	watch: {
		$route(to, from) {
			this.path = this.$route.path;
		}
	}
};
</script>
<style lang="scss">
.bg-login {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background-size: cover;
	.top-box {
		width: 100%;
		height: 90px;
		background: #fff;
		// box-shadow: 0 0 10px #aaa;
	}
	.logo {
		position: absolute;
		top: 16px;
		left: 160px;
		img {
			display: block;
			max-height: 60px;
		}
	}
	.web-name {
		position: absolute;
		top: 160px;
		left: 50%;
		width: 700px;
		margin-left: -350px;
		h2 {
			text-align: center;
			font-size: 32px;
			color: $mainColor;
		}
	}
	.login {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 480px;
		padding: 40px;
		box-sizing: border-box;
		background-size: 100% 100%;
		background: #fff;
		border-radius: 10px;
		border: 1px solid #d8d8d8;
		// box-shadow: 0 2px 12px 0 #9d9c9c;
		transform: translate(-50%, -50%);
	}
	.to_index {
		padding: 64px;
		span {
			height: 26px;
			font-size: 18px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #0d6ce4;
			line-height: 26px;
		}
		i {
			width: 32px;
			height: 32px;
			background: url(../../assets/homes/icon2.png) 100% no-repeat;
			background-size: 100% 100%;
			display: inline-block;
			vertical-align: -10px;
			margin-right: 16px;
		}
	}
}
</style>
